import React, { Component } from 'react'
import {CommontWrap} from './commont'
import {get} from '../../utils/http'
import {Icon} from "antd"
export default class Commont extends Component {
    constructor(){
        super()
        this.state={
            data:[],
            currentindex:0,
            type:0
        }
    }
handleclick=async (index,value)=>{
    let result=await get(`https://m.tuniu.com/mapi/tour/comment?productId=210600622&page=1&selectedType=${value.selectedType}&_=1576136846738087604387093398820`)
      let arr=[]
      arr.push(result.data.data)   
  this.setState({
      currentindex:index,
      data:arr,
      type:value.selectedType
  })
 // console.log(this.state.data); 
}
back=()=>{
    this.props.history.goBack()
    
}
 addChange=async (value)=>{
    let page=value.currentPage
    let total=value.pageNum
   if(page<total){
      page++
   }
let result=await get(`https://m.tuniu.com/mapi/tour/comment?productId=210600622&page=${page}&selectedType=${this.state.type}&_=1576136846738087604387093398820`)
 let arr=[]
arr.push(result.data.data)   
this.setState({
data:arr
}) 
} 
cutChange=async (value)=>{
    let page=value.currentPage
    if(page>1){
      page--  
    }   
let result=await get(`https://m.tuniu.com/mapi/tour/comment?productId=210600622&page=${page}&selectedType=${this.state.type}&_=1576136846738087604387093398820`)
let arr=[]
arr.push(result.data.data)   
this.setState({
data:arr
}) 
} 
    componentDidMount(){
        console.log(this.props);      
          this.state.data.push( this.props.location.state.data) 
          this.setState({})
    }
     
    render() {
        return (
            <CommontWrap>
               <header>
                <span onClick={this.back}><Icon type="arrow-left" style={{fontSize:'.3rem',color:'#000'}} /></span> 
               <em>评论</em>
               </header>
               <main>
                   <div className="nav">
                       <ul>
                           {
                               this.state.data.map((value,index)=>{
                                return (
                                   value.selectedTypeList.map((value1,index)=>{
                                       return(
                                       <li  onClick={() => {
                                           this.handleclick(index,value1)
                                       }
                                       }  className={this.state.currentindex===index? 'shows':''} >{value1.selectedName}</li>
                                       )
                                   })
                           )    })
                           }                        
                       </ul>
                   </div>
                   {
                       this.state.data.map((value,index)=>{
                           return (
                               value.list.map((value,index)=>{
                               return (
                                   <div className="list">
                       <div className="head">
                           <span> 
                               {
                                  value.userImage? <img src={value.userImage} alt=""/> :<img src='https://m4.tuniucdn.com/fb2/t1/G5/M00/C3/0E/Cii-slzrdQeIbAE7AAALeTsa-H4AAWIygP_9GIAAAue533.png' alt=""/>
                               }             
                               {value.realName}
                               <span className="sat">{value.compName}</span>
                               <span className="time">{value.remarkTime}</span>       
                           </span>                
                               <span className="other">{value.travelTypeName}</span>
                       </div>
                               <p>{value.content}</p>
                       <div className="imgs">
                           <ul> {
                                value.images.map((value,index)=>{
                                 return (
                            <li><img src={value.thumbUrl} alt=""/></li>
                                 )    
                                })
                                }
                               <span className="total">共{value.images.length}张</span>
                           </ul>
                       </div>
                   </div>
                               )     
                               })
                           )
                       })
                   }
                  <div className="foot">
                      {
                           this.state.data.map((value,index)=>{
                               return (  
                                   <div>
                                 <em  onClick={() => {
                                     this.cutChange(value) 
                                  }
                                  }>上一页</em> 
                                  <span> {value.currentPage}</span>   
                                  <em onClick={() => {
                                     this.addChange(value) 
                                  }
                                  }>下一页</em>  
                                   </div>
                                   
                                    
                               )
                           })
                      }
                 
                  </div>
               </main>
            </CommontWrap>
        )
    }
}
